<template>
    <div class="container">
        <Breadcrumb :items="['menu.analysis', 'menu.analysis.fuel']" />
        <a-space direction="vertical" :size="12" fill>
            <div class="space-unit">
                <AnalysisData></AnalysisData>
            </div>
        </a-space>

        <div class="space-unit">
            <EchartsData></EchartsData>
        </div>

        <a-space direction="vertical" :size="12" fill>
            <div class="space-unit">
                <HistoryPrice></HistoryPrice>
            </div>
        </a-space>
    </div>
</template>

<script lang="ts" setup>
    import AnalysisData from './components/analysis-data.vue';
    import EchartsData from './components/echarts-data.vue';
    import HistoryPrice from './components/history-price.vue';
</script>

<style scoped lang="less">
    .container {
        margin-bottom: 20px;
        padding: 0 20px 20px;
    }

    .space-unit {
        margin-bottom: 16px;
        background-color: var(--color-bg-2);
        border-radius: 4px;
    }

    .title-fix {
        margin: 0 0 12px;
        font-size: 14;
    }

    :deep(.section-title) {
        margin: 0 0 12px;
        font-size: 14px;
    }

    .content-wrap {
        width: 100%;
        // padding: 16px;
        white-space: nowrap;
    }
</style>
